<template>
	<view class="categoryContainer">
		<view class="categoryItem" v-for="(category,index) in categoryModule" :key="index">
			<!-- 上半部大图 -->
			<view class="bigImg">
				<image :src="category.titlePicUrl" ></image>
			</view>
			<!-- 下半部滑块列表 -->
			<scroll-view scroll-x enable-flex class="scrollContainer" >
				<view class="scrollItem" v-for="item in category.itemList" :key="item.id">
					<image :src="item.listPicUrl" mode=""></image>
					<text>{{item.name}}</text>
				</view>
			
	
				<view class="scrollItem more">
					更多商品
				</view>
			</scroll-view>
		</view>
	
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default {
		name:"Category",

		data() {
			return {
				
			};
		},
		computed:{
			...mapGetters(['categoryModule'])
		},
		mounted(){
			
		}
	}
</script>

<style lang="stylus">
.categoryItem 
	width: 100%
	height: 650rpx
	.bigImg
		width: 100%
		height: 400rpx
		margin-bottom: 20rpx
		image 
			width: 100%
			height: 100%
	.scrollContainer
		height:200rpx
		display: flex
		white-space: nowrap
		box-sizing: border-box
	
		.scrollItem
			width: 200rpx
			height: 200rpx
			display: flex
			align-items: center
			flex-direction: column
			box-sizing: border-box
			margin-left: 20rpx
			image 
				
				margin-bottom: 10rpx
				width: 130rpx
				height: 130rpx
				border-radius: 5rpx
			text 
				-webkit-line-clamp: 2
				display: -webkit-box
				-webkit-box-orient: vertical
				overflow: hidden
				text-overflow: ellipsis
				width: 100%
				white-space: pre-wrap
				font-size: 26rpx
		.more
				margin-right: 20rpx
				line-height: 200rpx
				background-color: #eee
				font-size: 26rpx
				padding: 0 20rpx
	
		
			
.test 
	color: #f89
</style>